<template>
  <yd-layout>
    <div style="width:100%;">
      <yd-flexbox>
        <yd-flexbox-item style="height:20%;">
          <div style="padding:10px">
            <img src="http://static.ydcss.com/uploads/ydui/1.jpg" class="tj-img">
          </div> 
        </yd-flexbox-item>
        <yd-flexbox-item style="height:2.5rem;">
          <yd-flexbox direction="vertical" style="padding:10px;font-size:14px">
            <yd-flexbox-item>{{item.name}}</yd-flexbox-item>
            <yd-flexbox-item>租车公司</yd-flexbox-item>
            <yd-flexbox-item>
              <div>
                <yd-rate slot="left" v-model="item.star" size="15px" color="#00FF16" active-color="#0078D7"></yd-rate>
              </div>
            </yd-flexbox-item>
        </yd-flexbox>
          <!-- <div style="height:30%;">{{item.name}}</div>
          <div style="height:30%;">租车公司</div>
          <div style="height:40%;"><yd-rate slot="left" v-model="item.star" size="12px" color="#00FF16" active-color="#0078D7"></yd-rate></div> -->
        </yd-flexbox-item>
        <yd-flexbox-item style="height:100px;padding-top:80px;padding-right:10px">
          <div style="float:right">永昌路</div>
        </yd-flexbox-item>
      </yd-flexbox>
    </div> 
    <div style="height:10%;margin-top:10px">
      <yd-flexbox>
        <div style="padding-left:20px;width:85%">
          <hd-svg-icon name="hd-dingwei" color="#8794F5" size=".5rem" class="hdicon"></hd-svg-icon>
          <span style="width:80%">{{item.address}}</span>
        </div>
        <div style="float:right">
          <!-- <a :href="'tel:' + phone ">{{ phone }}</a> -->
          <hd-svg-icon name="hd-dianhua" color="#8794F5" size=".5rem" class="hdicon"></hd-svg-icon>
        </div>
      </yd-flexbox>
    </div>
    <div class="line-div"></div>
    <div style="margin-top:5px;height:200px">
      <yd-slider autoplay="3000" style="height:200px">
        <yd-slider-item v-for="pic in item.pictures_arr" :key="pic.index" style="height:200px">
            <a href="http://www.ydcss.com">
                <img :src="pic" height:200px>
            </a>
        </yd-slider-item>
      </yd-slider>
    </div>
    <div style="padding-left:30px; padding-top:10px">
      <span>交通:</span>
    </div>
    <div style="padding-left:60px; padding-top:10px">
      <span>坐123倒148倒123倒271倒254倒蓝藻的</span>
    </div>
    <div class="line-div"></div>
    <div style="margin:10px;border:1px solid;padding:10px">
      <span style="font-size:15px">租车公司信息</span>
      <div  style="padding:10px">
        <yd-flexbox>
          <div style="width:15%">
            <hd-svg-icon name="hd-zhongbiao" color="#8794F5" size=".5rem" class="hdicon"></hd-svg-icon>
          </div>
          <div>营业和时间:{{item.open_date}}
            <div>{{item.open_time}}</div>
          </div>
      </yd-flexbox>
      </div>
      <div>简介:</div>
      <div style="margin-top:15px;margin-left:20px" v-html="item.content"></div>
      <div style="margin-top:10px">
        <yd-flexbox style="width:100%;flex-wrap: wrap;padding-left:15px" >
          <div v-for="information in showinformation" :key="information.index" style="width:2rem;">
            <hd-svg-icon :name="information.image" color="#8794F5" size=".3rem" class="hdicon"></hd-svg-icon>
            {{information.label}}
          </div>
        </yd-flexbox>
      </div>
      </div>
  </yd-layout>    

  
    
</template>

<script>
export default {
  name: 'demo',
  data () {
    return {
      item: {},
      username: '',
      mobile: '',
      idcard: '',
      result: '',
      search: '',
      outdata: '',
      // swiper 参数设置 详见
      swiperOption: {
        pagination: '.swiper-pagination',
        slidesPerView: 'auto',
        centeredSlides: true,
        paginationClickable: true,
        spaceBetween: 30,
        loop: true
      },
      infortationarr: [
        {
          label: '免费wifi',
          image: 'hd-iconfontwifi1',
          value1: '0',
          checked: false
        },
        {
          'label': '停车场',
          'image': 'hd-tingchechang',
          'value1': '1',
          'checked': false
        },
        {
          'label': '接送服务',
          'image': 'hd-jiesongfuwu',
          'value1': '2',
          'checked': false
        },
        {
          'label': '行李寄存',
          'image': 'hd-xinglijicun',
          'value1': '3',
          'checked': false
        },
        {
          'label': '餐厅',
          'image': 'hd-canting',
          'value1': '4',
          'checked': false
        },
        {
          'label': '24h热水',
          'image': 'hd-24xiaoshireshui',
          'value1': '5',
          'checked': false
        },
        {
          'label': '吹风机',
          'image': 'hd-chuifengji',
          'value1': '6',
          'checked': false
        },
        {
          'label': '免费洗漱用品',
          'image': 'hd-mianfeixishuyongpin',
          'value1': '7',
          'checked': false
        },
        {
          'label': '叫醒服务',
          'image': 'hd-jiaoxingfuwu',
          'value1': '8',
          'checked': false
        },
        {
          'label': '送餐服务',
          'image': 'hd-songcanfuwu',
          'value1': '9',
          'checked': false
        },
        {
          'label': '会议室',
          'image': 'hd-huiyishi',
          'value1': '10',
          'checked': false
        },
        {
          'label': '商务中心',
          'image': 'hd-shangwuzhongxinr',
          'value1': '11',
          'checked': false
        },
        {
          'label': '可吸烟',
          'image': 'hd-icon_smoke',
          'value1': '12',
          'checked': false
        }
      ],
      array: [],
      showinformation: []
    }
  },
  mounted: function() {
    this.load();
  },
  methods: {
    load() {
      this.item = this.$route.query;
      console.log(this.item);
      this.item.pictures_arr = this.item.pictures_arr.split(',');
      console.log(this.item.pictures_arr);
      console.log(this.item.infomation.split(','));
      this.array = this.item.infomation.split(',');
      this.infortationarr.forEach(function(element) {
        this.array.forEach(function(list) {
          if (list === element.value1) {
            this.showinformation.push(element);
            console.log(this.showinformation);
          }
        }, this);
      }, this);
    },
    info() {
      alert('123');
    }
  }
}
</script>

<style>
body{
  font-family: '微软雅黑'
}
header{
  background-color: #393A3F;
}
.tj-img{
  height: 2.5rem;
  width: 2.5rem;
  float:left
}
.yd-input{
  width: 100%;
}
.yd-input input{
  width: 100%;
}
.swidiv{
  float: left;
}
.mapbut{
  border: 1px solid #000;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  position: fixed;
  width: 25%;
  height: 35px;
  line-height: 35px;
  left: 37.5%;
  bottom: 10px;
  z-index: 100;
}
.xbtdiv{
  /* padding-top:10px; */
  margin-top:10px;
  margin-left: 40%;
  font-size: 0.4rem;
}
.adddiv{
  padding-top:5px;
  margin-left: 40%;
  font-size: 0.3rem;
  margin-top: 5px;
}
.mapbut .icon-ucenter-outline:before {
  content: "\E616";
  color: #000;
}
.skljx{
  width: 100%;
  height: 80px;
  padding: 5px 10px;
}
.skljxt{
  font-size: 14px;
}
.skljgl{
  position: relative;
  border-radius: 15px;
  top: -120px;
  left: 10px;
  width: 30px;
  height: 25px;
}
.skljxt2{
  font-size: 12px;
}
.skljxr{
  float: right;
  font-size: 12px;
}
.zn{
  position: relative;
  border-radius: 15px;
  top: -48px;
  left: -110px;
  width: 30px;
  height: 25px;
}
.ddxgzn{
  position: relative;
  border-radius: 15px;
  top: -40px;
  left: 10px;
  width: 30px;
  height: 25px;
}
.ddxg img{
  width: 100%;
  height: 300px;
}
.sklj img{
  width: 100%;
  height: 300px;
}
.icon-ucenter-outline:before {
    content: "\E616";
    color: #fff;
}
.back-icon:before {
    content: "\E607";
    color: #fff;
}
element.style {
    color: #fff;
}
.navbar-item>a {
  color: #fff;
}
.headimg img{
  width: 100%;
  height: 250px;
}
.condiv{
  padding: 10px 10px;
}
.condiv button{
  font-size: 14px;
  width: 40%;
  height: 45px;
}
.m-cell {
  background-color: #218B98;
  padding: 10px;
  margin-bottom: -10px;
}
.cell-item{
  height: 40px;
  padding: 0px;
  background-color: #fff;
  border-radius: 8px;
}
.cell-right{
  min-height: 0px;
}
.imgsli{
  min-width: 100%;
  height: 300px;
}
.imgsli li{
  float: left;
  width: 70%;
  height: 300px;
  border: 2px solid #000;
}
.zdytop{
  margin-top: 10px;
  width: 100%;
  height: 50px;
  padding: 10px;
}
.zdyleft{
  float: left;
  width: 50%;
  height: 50px;
  margin-left: 0px;
  float: left;
  text-align: left;
}
.zdyleft-top{
  font-size: 18px;
}
.zdyleft-button{
  color: #D0D0D0;
}
.zdyright{
  float: right;
  font-size: 12px;
  width: 50%;
  height: 30px;
  margin-right: 0px;
  text-align: right;
  line-height: 30px;
}
.fengexian{
  margin-left: 2%;
  width: 96%;
  border-bottom: 1.5px solid #999999;
  margin-top: 15px;
}
.swiper-container {
  width: 100%;
  margin: 20px auto;
}
.line-div{
  margin-top:20px;
  border-top: 1px solid #bbbbbb;
  margin-left:5%;
  width: 90%;
}
.swiper-slide {
  float: left;
  text-align: left;
  font-size: 18px;
  background: #fff;
  width: 60%;

  /* Center slide text vertically */
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.imgjxx{
  position:relative;
  float: left;
  width: 300px;
}
.imgxl{
  float: left;
  margin-top: 3px;
  width: 50%;
  height: 60px;
}
.imgxlt{
  font-size: 14px;
}
.imgxlb{
  font-size: 12px;
}
.imgxr{
  float: right;
  text-align: center;
  margin-top: 3px;
  width: 100px;
  font-size: 12px;
  /* overflow:hidden;
  text-overflow:ellipsis; 
  white-space: nowrap; */
}
</style>
